<template>
  <el-drawer v-model="isDrawerVisible" size="40%">
    <template #title>
      <h2 style="color: #f58147; font-weight: bold;">购物车详情</h2>
    </template>
    <div class="drawer-content">
      <el-descriptions direction="vertical" :column="2" size="large" border class="custom-descriptions">
        <el-descriptions-item label="购物车id" label-class-name="custom-label" content-class-name="custom-content">
          {{ gouwuche.gwcid }}
        </el-descriptions-item>
        <el-descriptions-item label="用户id" label-class-name="custom-label" content-class-name="custom-content">
          {{ gouwuche.yhid }}
        </el-descriptions-item>
        <el-descriptions-item label="商品id" label-class-name="custom-label" content-class-name="custom-content">
          {{ gouwuche.cpid }}
        </el-descriptions-item>
        <el-descriptions-item label="商品数量" label-class-name="custom-label" content-class-name="custom-content">
          {{ gouwuche.cpsl }}
        </el-descriptions-item>
        <el-descriptions-item label="商品单价" label-class-name="custom-label" content-class-name="custom-content">
          ¥ {{ gouwuche.cpdj }}
        </el-descriptions-item>
        <el-descriptions-item label="商品总价" label-class-name="custom-label" content-class-name="custom-content">
          ¥ {{ gouwuche.cpzj }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 控制抽屉的显示
const isDrawerVisible = ref(false);

const gouwuche = ref({
  gwcid: '',
  yhid: '',
  cpid: '',
  cpsl: '',
  cpdj: '',
  cpzj: ''
});

// 接收父组件传递过来的对象数据
const handleDetailData = (obj) => {
  isDrawerVisible.value = true;
  gouwuche.value = obj;
};

// 将 handleDetailData 暴露给父组件
defineExpose({
  handleDetailData
});
</script>

<style scoped>
.drawer-content {
  padding: 20px;
  background-color: #f9f9f9;
}

.custom-descriptions {
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  border-left: 4px solid #f58147; /* 添加橙色边框 */
}

.custom-label {
  color: #606266;
  font-weight: bold;
  width: 120px;
}

.custom-content {
  padding-left: 15px;
}

::v-deep .el-descriptions__label {
  color: #606266;
  font-weight: bold;
  width: 120px;
}

::v-deep .el-descriptions__label + td {
  border-color: #ebeef5 !important;
}

</style>
